<template>
  <j-dialog initTitle="下载数据" class='download_dialog' ref="dialog">
    <div class="part">
      <label>
        <j-checkbox id='chart' v-model="chart" @change="change('chart')"></j-checkbox>图</label>
      <label>
        <j-checkbox id='table' v-model="table" @change="change('table')"></j-checkbox>表</label>
    </div>
    <div class="part">
      <figure @click="download('pdf')">
        <img class="filetype" src="../assets/images/pdf.png" alt="保存为PDF" >
        <p>保存为PDF</p>
      </figure>
      <figure @click="download('word')">
        <img class="filetype" src="../assets/images/word.png" alt="保存为WORD" >
        <p>保存为WORD</p>
      </figure>
    </div>
  </j-dialog>
</template>
<script>
import jDialog from './jDialog'
import jCheckbox from './jCheckbox'

export default {
  name: 'jDownload',
  data() {
    return {
      chart: true,
      table: false
    }
  },
  methods: {
    change(type) {
      if (type === 'chart') {
        this.table = !this.chart
      } else {
        this.chart = !this.table
      }
    },
    download(fileType) {
      var data = {
        fileType: fileType,
        charts: this.chart,
        table: this.table
      }
      this.$emit('download', data)
      this.close()
    },
    show() {
      this.chart = true
      this.table = false
      this.$refs.dialog.show = true
    },
    close() {
      this.$refs.dialog.show = false
    }
  },
  components: {
    jDialog,
    jCheckbox
  }
}
</script>
<style lang="scss" scoped>
.download_dialog {
  width: 475px;
  height: 310px;
  font-size: 14px;
}

.part {
  margin: 0 40px;
  padding: 10px 0 30px;
  text-align: center; // display: -ms-flexbox;
  // display: flex;
  // justify-content: space-around;
  &:first-child {
    border-bottom: 1px #e2e2e2 solid;
  }
  &:last-child {
    padding-bottom: 10px;
    border-bottom: none;
  }
  label,
  figure {
    display: inline-block;
    width: 49%;
  }
}

figure {
  display: inline-block;
  cursor: pointer;
  margin: 10px 0;

  p {
    margin-top: 10px;
  }
}

.filetype {
  width: 85px;
  height: 85px;
}

.chb {
  margin-right: 5px;
}
</style>



// WEBPACK FOOTER //
// src/components/jDownload.vue